<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/x-icon" href="static/favicon.ico">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/page_setting.min.css">
    <link rel="stylesheet" href="static/font/bootstrap-icons.min.css">
    <script>
        var if_ie_11 = navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf('rv:11.0') > -1;
        var if_ie = navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1;
        if (if_ie_11 || if_ie){
            window.stop?window.stop():document.execCommand('Stop');
            alert('不支持IE浏览器或IE兼容模式, 请更换浏览器再试!');
            var url = window.location.host;
            document.documentElement.innerHTML = '<div style="margin:auto;width:50%;"><h1>不支持IE浏览器或IE兼容模式</h1><h1>请复制下方地址使用其他浏览器访问:</h1><h1>http://'+url+'</h1></div>';
        }
      </script>
    <script src="static/js/jquery.slim.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/html2canvas.min.js"></script>
    <script src="static/js/jszip.min.js"></script>
    <script src="static/js/rongmei_utils.min.js"></script>
    <title>荣美之家一周任务</title>
</head>

<body>
    <div class="container">
        <div class="display-4 text-center p-1" style="font-family: kaiti;color:#007BFF;">荣美之家一周任务</div>

        <div class="p-1">
            <button type="button" class="btn btn-outline-primary" onclick="hiding_showing(this)"
                data-toggle="tooltip" title="点击可切换复制模式!">复制图片模式</button>
            <button type="button" id="dlall" class="btn btn-outline-primary" onclick="if_save(this)">打包下载图片</button>
            <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target=".multi-collapse"
                aria-expanded="false" aria-controls="collapseExample collapseWidthExample" onclick="name_tip(this)">更换背景图案</button>
            
            <button class="collapse btn btn-outline-primary multi-collapse" type="button" id="collapseWidthExample" onclick="rm_bg()">恢复预设样式</button>
            <button class="collapse btn btn-outline-primary multi-collapse" type="button" id="collapseWidthExample" name='from_local' data-toggle="tooltip" title="该功能仅支持Chrome内核浏览器" onclick='from_local_img()'>选择本机图片</button>
        </div>
        <div class="collapse multi-collapse" id="collapseExample">
            <div class="row justify-content-md-center p-1" name='img-selecting'>
            </div>
            <div class="row justify-content-md-center" id="pagination"></div>
        </div>

        <div class="row justify-content-md-center" id='show_cards'>
            {% for data in datas%}
            <div class="col-md-4">
                
                <div class="card bg-light border-secondary mb-3 text-center">
                    
                    <h1 class="card-header">
                        {{data[0]}}
                    </h1>
                    <div class="card-body">
                        <div class="card-title"><strong>☀️ 心满意足餐厅 ☀️</strong></div>

                        <div class="card-text text-left">
                            🍼 每日灵奶:<br>
                            🍉{{data[1]}}<br>
                            🍇{{data[2]}}<br>
                            <br>
                            🍱每日配菜:<br>
                            {% for i in data[3] %}<div class="dg-item">🌿{{i}}</div>{% endfor %}
                            <div class="dg-item">🌿选取当日所读经文中有感动的祷告</div>
                            <br>
                            🕊️自由选择两项搭配🕊️<br>
                            🍷营养丰富，请勿错过🍷<br>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary btn-lg" name="copyimg" onclick="copy_data(this)"><span
                            class="bi bi-image"></span>&nbsp;点击复制为图片</button>
                    <button type="button" class="btn btn-primary btn-lg d-none" name="copytext"
                        onclick="copy_data(this)"><span class="bi bi-card-text"></span>&nbsp;点击复制为文字</button>
                    <img class='d-none' name='card_img' src='' />
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>